<template>
  <by-background />

  <by-navigation-bar title="编辑信息" />

  <view class="padding-20">
    <view class="card margin-bottom-20">
      <by-cell v-model="form.username" left-value label-width="136rpx" label="联系人" type="text" placeholder="请输入您的姓名" />
      <by-cell left-value label-width="136rpx">
        <by-radius :model-value="form.userGender == 0" class="margin-right-80" label="先生" @click="form.userGender = 0" />
        <by-radius :model-value="form.userGender == 1" label="女士" @click="form.userGender = 1" />
      </by-cell>
    </view>

    <view class="card">
      <by-cell
        v-for="(item,index) in list"
        v-model="form[item.value]"
        :key="index"
        left-value
        label-width="136rpx"
        :type="item.type"
        :label="item.name"
        :maxlength="item.maxlength"
        :placeholder="item.placeholder"
        :border="index !== list.length - 1"
        :show-arrow="item.type === 'date' || item.type === 'address'"
      >
        <view v-if="item.type === 'date'" class="flex-item height-full" @click="showDateTime">
          <text class="text-30" :class="form.serviceTimeStr ? 'color-t1' : 'color-placeholder'">{{form.serviceTimeStr ? dateFormat(form.serviceTimeStr,'MM月DD日 hh:mm') : item.placeholder}}</text>
        </view>

        <view v-if="item.type === 'address'" class="flex-item height-full" @click="chooseAddress">
          <text class="text-30" :class="form.userAddress ? 'color-t1' : 'color-placeholder'">{{form.userAddress || item.placeholder}}</text>
        </view>
      </by-cell>
    </view>

    <by-button class="margin-top-80" height="78rpx" text="保存" bold @click="save"/>
  </view>

  <tui-datetime ref="dateTime" :type="9" cancelColor="#999999" color="#FFB618" @confirm="form.serviceTimeStr = $event.result" />
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { mobile } from '@/common/test'
import { dateFormat, jump, toast } from '@/common/util'
import type { AnyObject, ISubscribeInfo } from '@/common/types'

interface IListItem{
  name: string
  type: string
  maxlength: number
  value: 'userTel' | 'userWx' | 'serviceTimeStr' | 'userAddress' | 'userAddressSecond'
  placeholder: string
}
const list: IListItem[] = [
  { name: '手机号', type: 'number', maxlength: 11, value: 'userTel', placeholder: '请输入手机号' },
  { name: '微信号', type: 'text', maxlength: -1, value: 'userWx', placeholder: '请输入微信号' }
  /* { name: '服务时间', type: 'date', maxlength: -1, value: 'serviceTimeStr', placeholder: '请选择服务时间' },
  { name: '服务地址', type: 'address', maxlength: -1, value: 'userAddress', placeholder: '请选择服务地址' },
  { name: '门牌号', type: 'text', maxlength: -1, value: 'userAddressSecond', placeholder: '请输入门牌号' }*/
]

const userStore = useUserStore()
const form = reactive<ISubscribeInfo>({
  username: '',
  userGender: 0,
  userTel: '',
  userWx: '',
  userAddress: '',
  userAddressSecond: '',
  serviceTimeStr: ''
})

Object.assign(form, userStore.subscribeInfo)

const dateTime = ref()
function showDateTime() {
  setTimeout(() => {
    dateTime.value.show()
  }, 50)
}

function chooseAddress() {
  uni.chooseLocation({
    success: (e:AnyObject) => {
      form.userAddress = e.name
    }
  })
}

function save() {
  if (!form.username) {
    toast('请输入您的姓名')
    return
  }
  for (let i = 0; i < list.length; i++) {
    const item = list[i]
    if (item.value === 'userTel' || item.value === 'userWx') {
      if (!form.userTel && !form.userWx) {
        toast('请输入手机号或微信号')
        return
      }
      if (form.userTel && !mobile(form.userTel)) {
        toast('手机号码不正确')
        return
      }
    } else {
      if (!form[item.value]) {
        toast(item.placeholder)
        return
      }
    }
  }

  userStore.setSubscribeInfo(form)
  jump()
}
</script>

<style scoped lang="scss">
@include setMargin(right, 80);

@include setMargin(top, 80);

.card{
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 6rpx 24rpx;
}
</style>
